<template>
  <div id="app">
    <el-button type="primary" @click="addUser()">新增</el-button>
    <el-table :data="tableData" border>
      <el-table-column fixed prop="id" label="id" width="300"></el-table-column>
      <el-table-column prop="name" label="姓名" width="300"></el-table-column>
      <el-table-column prop="username" label="用户名" width="300"></el-table-column>
      <el-table-column prop="userface" label="头像" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.userface" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column label="操作" width="305">
        <template slot-scope="scope">
          <el-button @click="(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!--新增编辑用户开始-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="1 "
            multiple
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUser()">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateUser('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增编辑用户结束-->
  </div>
</template>

<script>
export default {
  name: "app",
  mounted() {
    this.getUserList();
  },
  methods: {
    //编辑或者新增提交到后台
    addOrUpdateUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var formData = new FormData();
          //将原来form 的值添加到 formData中
          for (var o in this.form) {
            formData.append(o, this.form[o]);
          }
          this.imUrlList.forEach(function(url) {
            formData.append("images", url);
          });
          this.fileList.forEach(function(file) {
            if (file.raw) {
              formData.append("files", file.raw, file.name);
            }
          });

          //设置图片上传的格式
          let config = {
            "Content-Type": "multipart/form-data"
          };

          console.log("formData----------------->", formData);
          for (var key of formData.keys()) {
            console.log("key:{},value:{}", key, formData.get(key));
          }

          var $this = this;
          this.axios({
            method: this.userMethod,
            url: this.requestUrl + this.userUrl,
            data: formData,
            config: config
          }).then(function(res) {
            console.log("编辑或者新增返回:{}", res);
            $this.$message({
              message: res.data.msg,
              type: "success"
            });
            if (res.data.code == 200) {
              $this.dialogFormVisible = false;
              $this.getUserList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlerChange(file, files) {
      this.fileList = files;
    },
    //新增用户
    addUser() {
      this.userClear();
      this.dialogFormVisible = true;
      this.title = "新增用户";
      this.userMethod = "post";
      this.userUrl = "/user/add";
    },
    //清空弹出层的form表单的内容
    userClear() {
      for (var item in this.form) {
        if (Array.isArray(this.form[item])) {
          this.form[item] = [];
        } else {
          this.form[item] = null;
        }
      }
    },
    getUserList() {
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:8060/feign/user/list",
        params: {
          pageNo: this.currentPage4,
          pageSize: this.pageSize,
          token: 123456
        }
      }).then(function(res) {
        $this.tableData = res.data.obj.list;
        $this.total = res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getUserList();
    },
    handleClick(row) {
      console.log(row);
    }
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      tableData: [],
      currentPage4: 1,
      pageSize: 2,
      total: 2,
      dialogFormVisible: false,
      title: "",
      userMethod: "",
      form: {
        name: "",
        username: "",
        value: []
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        value: [{ required: true, message: "请选择省市区", trigger: "blur" }]
      },
      fileList: [],
      imageUrl: "",
      imUrlList: [],
      formLabelWidth: "120px",
      userUrl: "/user"
    };
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>